<template>
<!--  顶部-->
  <van-notice-bar scrollable text="筛选小组、班级、课程功能，已完善" />

  <van-search v-model="keyword" placeholder="搜索" />

<!--  第二行-->
  <van-dropdown-menu>
    <van-dropdown-item v-model="selectedFilter" title="筛选">
      <van-cell center title="小组任务">
        <template #right-icon>
          <van-switch v-model="filterOptions.groupTask" size="24px" active-color="#07c160" @change="data_filter=filtered()">小组任务</van-switch>
        </template>
      </van-cell>
      <van-cell center title="我的反馈">
        <template #right-icon>
          <van-switch v-model="filterOptions.myFeedback" size="24px" active-color="#07c160">我的反馈</van-switch>
        </template>
      </van-cell>
    </van-dropdown-item>
    <van-dropdown-item v-model="selectedTask" title="选择任务" :options="tasks" @close="data_filter=filtered()"/>
    <van-dropdown-item v-model="selectedClass" title="班级" :options="classes" @close="data_filter=filtered()"/>
  </van-dropdown-menu>
  <van-cell>
  <div style="display: flex;flex-wrap: nowrap">任务：<div style="color: red;font-weight: 800">{{tasks[selectedTask].text}}</div></div>
  </van-cell>
<!--  第三行-->

  <van-collapse v-model="activeCollapse" accordion>
    <van-collapse-item v-for="(item, index) in data_filter" :key="index" :title="item.name" icon="user-circle-o" :v-show="item.task_name === tasks[selectedTask].text">
      <template #title>
        <span>{{item.name}}</span>
        <van-tag type="primary" style="margin-left: 5px">{{item.class_name}}</van-tag>
      </template>
      <template #value>
        <div :class="submitStatusColor_score(item.scoreStatus)" style="font-weight: bold">{{ item.scoreStatus!=-1 ? item.scoreStatus : "未评分" }}</div>
      </template>
      <van-cell>
        <template #title>
          <span class="custom-title">完成情况：</span>
          <van-tag type="success">{{item.teamwork ? "小组作业" : "个人作业"}}</van-tag>
        </template>
        <template #value>
          <div :class="submitStatusColor(item.submitStatus)">{{ item.submitStatus }}</div>
        </template>
      </van-cell>
    </van-collapse-item>
  </van-collapse>

</template>

<script setup lang="ts">
import { onMounted, type Ref, ref, type UnwrapRef} from 'vue';

const keyword = ref('');
const selectedFilter = ref([]);
const selectedTask = ref(0);
const selectedClass = ref(0);

const filterOptions = ref({
  groupTask: false,
  myFeedback: false
});

const tasks = ref([
  { text: 'Vue3开发初体验', value: 0 },
  { text: 'Vue3组件化开发', value: 1 },
  { text: 'Vue3路由的使用', value: 2 },
  { text: '电影列表项目', value: 3 },
  { text: 'Vue自动化测试', value: 4 },
  { text: '状态管理Pinia', value: 5 },
  { text: '使用UI组件库', value: 6 },
]);// 任务数组

const classes = ref([
  { text: '全部', value: 0 },
  { text: '22软件3班', value: 1 },
  { text: '22软件1班', value: 2 },
  { text: '21软件1班', value: 3 },
  { text: '21软件2班', value: 4 },

]);// 班级数组


const activeCollapse = ref('');

// const data = ref([]);
const data = ref([
  { name: '小王', class_name:'22软件1班' ,task_name:'Vue3开发初体验' ,scoreStatus: -1, completionStatus: '未完成', submitStatus: '未提交',teamwork:false },
  { name: '小黄', class_name:'22软件3班' ,task_name:'Vue3开发初体验' ,scoreStatus: 95, completionStatus: '完成', submitStatus: '已提交',teamwork:true },
  // 数据
]);

let data_filter : Ref<UnwrapRef<any[]>> = ref([]);


function submitStatusColor(status : string) {
  return {
    'text-green': status === '已提交',
    'text-red': status === '未提交'
  };
}

function submitStatusColor_score(score: number) {
  return {
    'text-red': score < 65,
    'text-yellow': score >= 65 && score < 75,
    'text-green': score >= 75 && score < 95,
    'text-pink': score >= 95,
    'text-gray': score === -1,
  };
}

// 随机生成姓名
function generateRandomName() {
  const firstNames = ['小明', '小红', '小刚', '小李', '小花', '小华', '小强', '小龙', '小雨', '小燕'];
  const lastNames = ['王', '李', '张', '刘', '陈', '杨', '黄', '吴', '赵', '周'];
  const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
  const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
  return lastName + firstName ;
}

// 随机生成分数
function generateRandomScore() {
  return Math.floor(Math.random() * 101); // 0 到 100 之间的随机数
}

// 随机选择班级和任务
function getRandomClass(classes:any) {
  const index = Math.floor(Math.random() * (classes.length - 1)) + 1; // 随机索引，跳过第一个 "全部"
  return classes[index].text;
}

function getRandomTask(tasks:any) {
  const index = Math.floor(Math.random() * tasks.length);
  return tasks[index].text;
}

function getRandomTeamWork() {
  const index = Math.random();
  if (index>0.5)
  {
    return true
  }
  else
  {
    return false
  }
}

// 生成随机数据
function generateRandomData(tasks:any, classes:any, count:any) {
  const data = [];
  for (let i = 0; i < count; i++) {
    const name = generateRandomName();
    const class_name = getRandomClass(classes);
    const task_name = getRandomTask(tasks);
    const scoreStatus = Math.random() < 0.5 ? generateRandomScore() : -1; // 50% 的概率生成随机分数，另外 50% 设置为 -1
    const completionStatus = scoreStatus === -1 ? '未完成' : '完成';
    const submitStatus = scoreStatus === -1 ? '未提交' : '已提交';
    const teamwork = getRandomTeamWork();
    data.push({ name, class_name, task_name, scoreStatus, completionStatus, submitStatus , teamwork});
  }
  return data;
}

function filtered() {
  let filtered_tmp: Array<{ name: string, class_name: string, task_name: string, scoreStatus: number, completionStatus: string, submitStatus: string ,teamwork: boolean}> = [];
  // 根据 currentFilter 的值来过滤 todos
  data.value.forEach((dtmp, index) => {
    // 添加一个 index_value 属性来存储原始索引
    if(dtmp.teamwork === filterOptions.value.groupTask)
    {
      if (dtmp.task_name === tasks.value[selectedTask.value].text) {
        if(classes.value[selectedClass.value].text === "全部")
        {
          filtered_tmp.push({ ...dtmp });
        }
        else
        {
          if(dtmp.class_name === classes.value[selectedClass.value].text)
          {
            filtered_tmp.push({ ...dtmp });
          }
        }
      }
    }
  });
  console.log(filtered_tmp)
  return filtered_tmp;
}



onMounted(() => {
  // 使用生成的随机数据
  data.value = generateRandomData(tasks.value, classes.value, 100);
  // console.log(data)
  data_filter.value = filtered()
  console.log(data_filter.value)
});

</script>

<style scoped>
.text-green {
  color: green;
}

.text-pink {
  color: pink;
}

.text-yellow {
  color: #a8a84b;
}

.text-red {
  color: red;
}

.text-gray {
  color: gray;
}

</style>